<template>
	<div class="search abs full">
		<div class="rel full overflow-hidden" :class="{'quit':isFocus,'not-load':!$root.isLoad.flag}">
			<div class="abs search-mock" @click="mock()" v-if="!isFocus"></div>
			<div class="search-branch-group">
				<transition name="move-left">
					<div v-show="!isFocus">
						<div class="abs search-branch-left"></div>
						<div class="abs search-branch-left search-branch-left-bottom"></div>
					</div>
				</transition>
				<transition name="move-right">
					<div v-show="!isFocus">
						<div class="abs search-branch-right"></div>
						<div class="abs search-branch-right search-branch-right-bottom"></div>
					</div>
				</transition>
			</div>
			<div class="search-input-group">
				<transition name="fade-quickly">
					<div v-show="!isFocus">
						<div class="abs search-title" :class="isFocus==true?'':'float'"></div>
					</div>
				</transition>
				<div class="abs search-input-img middle">
					<div class="rel">
						<div class="abs search-input-bg full"></div>
						<div class="abs search-input-top-left">
							<div class="rel">
								<div class="abs border top"></div>
								<div class="abs border left"></div>
							</div>
						</div>
						<div class="abs search-input-bot-right">
							<div class="rel">
								<div class="abs border bot"></div>
								<div class="abs border right"></div>
							</div>
						</div>
						<input type="text" class="abs search-input-real" style="z-index:5;" id="searchBox" ref="searchBox" placeholder="输入你感兴趣的重疾产品名称" maxlength="15" v-model="searchContent" @input="finishTyping($event)" @click="focusInput()">
						<div class="abs search-input-remove" v-if="searchContent" @click="removeContent()">
							<div class="search-input-remove-img"></div>
						</div>
					</div>
				</div>
				<transition name="fade">
					<div v-show="!isFocus">
						<div class="abs middle search-arrows"></div>
						<div class="abs middle search-slogan"></div>
					</div>
				</transition>
			</div>
			<div class="search-bottom-group">
				<div class="abs search-earth"></div>
				<div class="abs search-halo middle"></div>
			</div>
			<transition name="fade-up25">
				<div class="search-advice-group abs middle" v-if="isFocus && !isSearching">
					<div class="rel">
						<legend>最近搜索</legend>
						<span class="search-history-remove" @click="removeHistory()"></span>
						<div class="search-recent-box">
							<transition-group name="fade-up">
								<div class="search-recent-item" v-for="item in searchHistory" :key="item" @click="searchExistKeyword(item)" v-cloak>{{item | more(8)}}</div>
							</transition-group>
						</div>
						<legend class="mgtp10">热门搜索</legend>
						<div class="search-recent-box">
							<div class="search-recent-item" v-for="item in searchAdvice" :key="item.insuranceId" @click="searchExistKeyword(item.PRODUCT_NAME)" v-cloak>{{item.PRODUCT_NAME | more(17)}}</div>
						</div>
					</div>
				</div>
			</transition>
			<transition name="fade-up25">
				<div class="search-result-group rel" v-if="isSearching" ref="searchContainer" :style="'height: '+divHeight+'rem;'">
					<div class="rel" ref="searchChild">
						<search-result v-for="result in searchResult" :key="result.ID" :detail="result" @click.native="goToDetail(result)"></search-result>
						<div class="load-more" v-if="!isFin" v-cloak>
							<span class="loading">&nbsp;</span>
							<span class="text">正在加载</span>
						</div>
						<div class="load-finish" v-if="isFin && searchResult.length>0" v-cloak>没有更多了</div>
						<div class="load-finish" v-if="isFin && searchResult.length==0 && searchContent!=='' && task==null" v-cloak>搜索不到结果</div>
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
import SearchResult from '../../components/search-result/search-result.vue';

export default {
	name: 'hello',
	components: {
		SearchResult
	},
	data(){
		return {
			isFocus: false, //搜索input框是否聚焦了
			isSearching: false, //是否执行了搜索
			task: null, //定时器任务,输入文本后若干毫秒自动执行搜索
			timeStamp:0, //后退事件(popstate)的时间戳,每次后退时判断并更新时间戳间隔,用于过滤掉多余的(两次后退间隔少于50ms的)后退事件
			divEl:null, //搜索结果外层容器的dom存储在这里
			divChild: null, //搜索结果内层容器的dom存在这里
			loading: false, //标识当前是否正在加载更多,防止重复请求
			loadTimer: null, // 定时器,延迟加载更多
			isFin: true, //搜索结果是否还能加载更多
			divHeight:9, //搜索结果容器的dom的高度无法直接给定,需要计算出来,9(rem)是个初始值
			scrollTop:0, //容器内部的滚动条位置,用于返回搜索页面时,恢复滚动条位置
			searchContent:'', //搜索关键词
			searchContentOld:'', //搜索关键词(最后一次搜的,而非实时输入的)
			searchHistory:[], //最近搜索记录
			searchAdvice:['泰康老年恶性肿瘤','团体长期重大疾病','国华人寿至尊保重大疾病保险','新华人寿i相伴两全重疾组合险','新华人寿i相伴两全重疾组合险'], //全民热搜list
			currentPage:1,
			totalPage:0,
			searchResult: []
		}
	},
	methods: {
		// 点击搜索框上方的透明遮罩层时,先让动画执行完再触发文本框的聚焦事件
		mock: function(){
			this.isFocus=true;
			window.ensureExit=false;
			let that=this;
			window.setTimeout(function(){
				that.$refs.searchBox.focus();
			},580);
		},
		// 文本框获取焦点(解决部分机型不能获取焦点的问题)
		focusInput: function(){
			this.$refs.searchBox.focus();
		},
		// 点击文本框的清除文本圆钮时,清除文本框内容
		removeContent: function(){
			this.searchContent='';
			this.searchResult.length=0;
			this.isSearching=false;
			this.$refs.searchBox.focus();
		},
		// 获取最近搜索历史关键词
		getSearchHistory: function(){
			let historyStr=window.localStorage.getItem('searchHistory');
			let searchHistory=historyStr?JSON.parse(historyStr):[];
			searchHistory=searchHistory.slice(0,5);
			this.searchHistory=searchHistory;
		},
		// 将搜索历史存入localStorage
		setSearchHistory: function(){
			window.localStorage.setItem('searchHistory',JSON.stringify(this.searchHistory));
		},
		// 清除最近搜索历史
		removeHistory: function(){
			this.searchHistory=[];
			this.setSearchHistory();
		},
		// 获取全民热搜数组
		getSearchAdvice: function(){
			let that=this;
			this.$util.ajax('/insurance/name/hotsearch','post',{count:5}).then(function(res){
				if(res.code=='100000'){
					that.searchAdvice=res.data;
				}
			})
		},
		// 输入框内容改变后500ms, 自动执行一次搜索
		finishTyping: function(){
			let that=this;
			this.searchResult.length=0;
			this.$refs.searchBox.focus();
			if(this.searchContent.trim()===''){
				this.isSearching=false;
				return;
			}
			window.clearTimeout(this.task);
			window.setTimeout(function(){
				that.searchKeyword();
				that.task=null;
			},500);
		},
		// 以当前文本框中的内容作为关键词搜索保险产品,或者点击最近搜索过的关键词时,可以传递一个keyword作为关键词进行搜索
		searchKeyword: function(keyword){
			let that=this;
			this.searchContent=this.searchContent.trim();
			if(!keyword && this.searchContent.length==0){
				this.isSearching=false;
				return;
			}
			!!keyword?(this.searchContent=keyword):null;
			this.isSearching=true;
			setTimeout(this.initLoadListener,300);
			this.searchContent=this.searchContent.trim();
			// this.$refs.searchBox.blur();
			this.pushHistory();
			this.$util.ajax('/insurance/search','post',{
				keyWord: that.searchContent,
				pageStart:that.currentPage,
				pageSize:10
			}).then(function(res){
				console.log(res);
				if(res.code=='100000'){
					that.searchContentOld=that.searchContent;
					that.searchResult=that.searchResult.concat(res.data.CONTENT);
					that.currentPage=res.data.PAGE;
					that.totalPage=res.data.PAGE_CONTENT;
					if(res.data.PAGE<res.data.PAGE_CONTENT){
						that.isFin=false;
					} else {
						that.isFin=true;
					}
					that.loading=false;
				}
			});
		},
		// 查询已有的关键词
		searchExistKeyword: function(keyword){
			this.ifKeywordAvail(keyword);
			this.searchHistory.unshift(keyword);
			this.searchHistory=this.searchHistory.slice(0,5);
			this.setSearchHistory();
			this.searchKeyword(keyword);
		},
		// 为搜索结果列表添加事件监听,滑动到底部时执行'加载更多'函数
		initLoadListener: function(){
			let that=this;
			this.divEl=this.$refs.searchContainer;
			this.divChild=this.$refs.searchChild;
			this.divEl.ontouchend=function(){
				if(that.isFin==true){
					return;
				}
				window.clearTimeout(that.loadTimer);
				console.log('loading');
				that.loadTimer=window.setTimeout(that.loadMore,1500);
			};
		},
		// 加载更多搜索结果,如无更多,则让isFin=true
		loadMore: function(){
			if(this.$route.path!='/'){
				return;
			}
			if(this.divEl.clientHeight+this.divEl.scrollTop<this.divChild.clientHeight-300){
				return;
			}
			let that=this;
			if(this.loading==false && this.currentPage<this.totalPage){
				this.loading=true;
				setTimeout(function(){
					that.currentPage++;
					that.searchKeyword();
				},100);
			}
		},
		// 判断最近搜索的关键词列表里是否包含指定关键词,如包含则删去
		ifKeywordAvail: function(keyword){
			let arr=this.searchHistory;
			for(let i=0; i<arr.length; i++){
				if(arr[i]==keyword){
					arr.splice(i,1)
					break;
				}
			}
		},
		// 计算搜索结果div容器的高度
		calcHeight: function(){
			let rem=parseInt(window.html.style.fontSize);
			let windowHeight=window.pageHeight/rem;
			this.divHeight=windowHeight-1.95;
		},
		// 前往保险综合评价页面(路由跳转,url携带保险id之类的参数)
		goToDetail: function(result){
			this.ifKeywordAvail(this.searchContent);
			this.searchHistory.unshift(this.searchContent);
			this.searchHistory=this.searchHistory.slice(0,5);
			this.setSearchHistory();
			// 保存搜索结果页的滚动条位置
			this.divEl=this.$refs.searchContainer;
			this.scrollTop=this.divEl.scrollTop;
			this.$router.push('/detail?id='+result.ID);
		},
		preventClose: function(){
			let that=this;
			if(this.$route.path!='/'){
				return false;
			}
			window.addEventListener("popstate", function(e) {
				if(e.timeStamp-that.timeStamp>50){
					that.timeStamp=e.timeStamp;
				} else {
					that.timeStamp=e.timeStamp;
					return;
				}
				// 如果点击后退时,页面中有警告框或二维码弹层,先关闭弹层(不执行后退)
				if(that.$root.UI.alert.show || that.$root.UI.qrcode.show){
					that.hideAlert();
					that.hideQrcode();
					return;
				}
				if(that.$route.path!='/'){
					return;
				} else if(that.isFocus==true && that.isSearching==true){
					that.pushHistory();
					that.isSearching=false;
					that.searchContent='';
					that.searchResult=[];
					// 阻止了一次浏览器后退事件
					return;
				} else if(that.isFocus==true && that.isSearching==false){
					that.pushHistory();
					that.isFocus=false;
					that.$refs.searchBox.blur();
					// 阻止了一次浏览器后退事件
					return;
				} else if(that.isFocus==false && that.isSearching==false && window.ensureExit==false){
					window.ensureExit=true;
					that.showToast('再次按下返回键退出','',true);
					that.pushHistory();
					return;
				} else if(that.isFocus==false && that.isSearching==false && window.ensureExit==true){
					window.WeixinJSBridge && WeixinJSBridge.call('closeWindow');
					return;
				} else {
					return;
				}
			}, false);
		},
		// 跳过图片预加载动画
		loadComplete: function(){
			let welcome=document.getElementById('welcome');
			welcome.classList.add('hide');
			window.isLoad.flag=true;
			setTimeout(function(){
				let welcome=document.getElementById('welcome');
				if(!welcome){
					return;
				}
				document.body.hasChildNodes(welcome) && document.getElementById('webapp_container').removeChild(welcome);
			},1200);
		},
		// webapp首次被打开时,检查url里是否含有'?route=xxx',如含有,还原为/#/xxx的hash格式
		redirectURL: function(){
			let that=this;
			let route=this.$util.getQueryString('route');
			if(route!=null){
				setTimeout(bind,500);
				function bind(){
					that.loadComplete();
					window.addEventListener("popstate", function(e){
						// 如果点击后退时,页面中有警告框或二维码弹层,先关闭弹层(不执行后退)
						if(that.$root.UI.alert.show || that.$root.UI.qrcode.show){
							that.hideAlert();
							that.hideQrcode();
						}
						if(that.$route.path==window.lastRoute && window.ensureExit=='No'){
							window.ensureExit=false;
							return false;
						} else if(that.$route.path==window.lastRoute && window.ensureExit==false){
							window.ensureExit=true;
							// that.showToast('再次按下返回键退出','',true);
							return false;
						} else if(that.$route.path==window.lastRoute && window.ensureExit==true){
							window.WeixinJSBridge && WeixinJSBridge.call('closeWindow');
						}
					});
				}
			} else {
				return;
			}
			route='/'+route.split('#')[0];
			window.lastRoute=route;
			this.$router.replace(route);
			this.pushHistory();
			this.pushHistory();
		}
	},
	mounted: function(){
		// 为方便调试把this暴露在window对象下
		this.$pages.search=this;
		this.calcHeight();
		window.ensureExit=false; //用户在首页按一次返回键,可以阻止浏览器直接关闭,按两次则关闭
		this.pushHistory();
		this.pushHistory();
		this.redirectURL();
		this.getSearchHistory();
		this.getSearchAdvice();
		if(this.$route.path=='/'){
			setTimeout(this.preventClose,1500);
		}
	},
	activated(){
		document.title='智能保险专家';
		// 如果通过后退方式返回搜索结果页,还原滚动条位置
		let that=this;
		if(this.divEl){
			this.$nextTick(function(){
				that.divEl.scrollTop=that.scrollTop;
			});
		}
	},
	deactivated(){
		
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.search.abs.full {
		background: url(./image/night-sky.jpg);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.search-mock {
		width: 7.5rem;
		height: 7rem;
		top: 0;
		left: 0;
		background: none;
		z-index: 4;
	}
	.search-title {
		width: 3.12rem;
		height: 2.71rem;
		background: url(./image/search-title.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		top: 0.28rem;
		left: 2.19rem;
		transition: all 0.5s 1s;
	}
	.search-title.float {
		animation: float 4s infinite linear;
	}
	@keyframes float {
		from, to {
			transform: translateY(-0.1rem);
		}
		25%, 75% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(0.1rem);
		}
	}
	.search-branch-left {
		width: 1rem;
		height: 0.65rem;
		background: url(./image/left.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		top: 2.5rem;
		left: 0;
		transition: all 0.5s 3.7s;
	}
	.search-branch-left.search-branch-left-bottom {
		transform: scaleY(-1);
		top: 5.86rem;
	}
	.search-branch-right {
		width: 0.99rem;
		height: 0.43rem;
		background: url(./image/right.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		top: 2.5rem;
		right: 0;
		transition: all 0.5s 3.7s;
	}
	.search-branch-right.search-branch-right-bottom {
		transform: scaleY(-1);
		top: 5.96rem;
	}
	.search-input-group {
		transition: all 0.5s;
	}
	.quit .search-input-group {
		transform: translateY(-3.25rem);
	}
	.search-input-img {
		top: 3.52rem;
		width: 6.13rem;
		height: 1.41rem;
	}
	.search-input-img .rel{
		width: 6.13rem;
		height: 1.41rem;
	}
	.search-input-img .rel .search-input-bg {
		background: url(./image/search-input-content.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transition: all 1s 3s;
	}
	.search-input-img .rel .search-input-top-left {
		width: 0.76rem;
		height: 0.73rem;
		top: -0.08rem;
		left: -0.08rem;
		background: url(./image/search-input-top-left.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transition: all 0.5s 0.7s;
	}
	.search-input-img .rel .search-input-top-left .rel {
		width: 0.76rem;
		height: 0.73rem;
	}
	.search-input-img .rel .search-input-bot-right {
		width: 0.75rem;
		height: 0.72rem;
		bottom: -0.08rem;
		right: -0.08rem;
		background: url(./image/search-input-bot-right.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transition: all 0.5s 0.7s;
	}
	.search-input-img .rel .search-input-bot-right .rel {
		width: 0.75rem;
		height: 0.72rem;
	}
	.search-input-img .rel .top {
		width: 6.81rem;
		height: 0.12rem;
		background: url(./image/search-input-border-top.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transform-origin: 0 50%;
		transition: all 0.3s 1.5s;
	}
	.search-input-img .rel .bot {
		right: 0.06rem;
		bottom: 0.03rem;
		width: 6.81rem;
		height: 0.05rem;
		background: url(./image/search-input-border-bot.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transform-origin: 100% 50%;
		transition: all 0.3s 2.1s;
	}
	.search-input-img .rel .left {
		top: 0.06rem;
		left: 0.05rem;
		width: 0.03rem;
		height: 1.43rem;
		background: url(./image/search-input-border-left.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transform-origin: 50% 0;
		transition: all 0.3s 2.4s;
	}
	.search-input-img .rel .right {
		right: 0.05rem;
		bottom: 0.09rem;
		width: 0.03rem;
		height: 1.42rem;
		background: url(./image/search-input-border-right.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transform-origin: 50% 100%;
		transition: all 0.3s 1.8s;
	}
	.not-load .search-title {
		opacity: 0;
	}
	.not-load .search-input-top-left {
		transform: translate(-50%, -50%);
		opacity: 0;
	}
	.not-load .search-input-bot-right {
		transform: translate(50%, 50%);
		opacity: 0;
	}
	.not-load .border.top {
		transform: scaleX(3) translateX(2rem);
		opacity: 0;
	}
	.not-load .border.bot {
		transform: scaleX(3) translateX(-2rem);
		opacity: 0;
	}
	.not-load .border.left {
		transform: scaleY(3) translateY(2rem);
		opacity: 0;
	}
	.not-load .border.right {
		transform: scaleY(3) translateY(-2rem);
		opacity: 0;
	}
	.not-load .search-input-bg {
		transform: scale(0.9);
		opacity: 0;
	}
	.not-load .search-input-real {
		opacity: 0;
	}
	.not-load .search-arrows {
		opacity: 0;
	}
	.not-load .search-slogan {
		opacity: 0;
		transform: translateY(0.2rem);
	}
	.not-load .search-branch-left {
		transform: translateX(-100%);
	}
	.not-load .search-branch-right {
		transform: translateX(100%);
	}
	input.search-input-real {
		box-sizing: border-box;
		width: 6.13rem;
		height: 1.41rem;
		border: none;
		background: none;
		outline: none;
		padding-left: 0.96rem;
		padding-right: 0.8rem;
		font-size: 0.3rem;
		color: #e1f5ff;
		transition: all 1s 3.2s;
	}
	input.search-input-real::-webkit-input-placeholder {
		color: #c3d1ff;
	}
	input.search-input-real:focus {
		outline: none;
	}
	.search-input-remove {
		top: 0.42rem;
		right: 0.2rem;
		width: 0.58rem;
		height: 0.58rem;
		z-index: 6;
	}
	.search-input-remove-img {
		margin-top: 0.1rem;
		margin-left: 0.1rem;
		width: 0.38rem;
		height: 0.38rem;
		background: url(./image/remove.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.search-arrows {
		width: 4.39rem;
		height: 0.37rem;
		top: 5.14rem;
		background: url(./image/arrows.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transition: all 0.5s 4s;
	}
	.search-slogan {
		width: 3.48rem;
		height: 0.3rem;
		background: url(./image/search-slogan.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		top: 6rem;
		transition: all 0.5s 4.5s;
	}
	.search-earth {
		width: 7.5rem;
		height: 2.8rem;
		bottom: -0.5rem;
		background: url(./image/earth.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		transition: all 0.5s;
	}
	.quit .search-earth {
		transform: translateY(1rem);
		opacity: 0;
	}
	.abs.search-halo {
		width: 6.56rem;
		height: 8.24rem;
		bottom: 0.8rem;
		background: url(./image/halo.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		z-index: 0;
		transition: all 0.5s;
	}
	.quit .search-halo {
		transform: translateY(1.9rem);
	}
	.search-advice-group {
		top: 1.95rem;
		width: 6.28rem;
		min-height: 7.01rem;
		background: url(./image/result.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.search-advice-group .rel {
		width: 5.68rem;
		min-height: 6.21rem;
		padding: 0.4rem 0.2rem 0.4rem 0.4rem;
	}
	.search-advice-group legend {
		font-size: 0.24rem;
		font-weight: bold;
		color: #547bf7;
	}
	.search-advice-group .search-history-remove {
		display: block;
		position: absolute;
		top: 0.32rem;
		right: 0.42rem;
		width: 0.28rem;
		height: 0.29rem;
		background: url(./image/delete.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}
	.search-advice-group legend:after {
		display: block;
		content: '';
		width: 5.46rem;
		height: 0.1rem;
		background: url(./image/border-bottom.png);
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
		margin-top: 0.05rem;
	}
	.search-advice-group .search-recent-box {
		font-size: 0;
		padding: 0.2rem 0 0.2rem 0.1rem;
	}
	.search-advice-group .search-recent-item {
		display: inline-block;
		height: 0.5rem;
		line-height: 0.5rem;
		padding: 0.02rem 0.24rem;
		font-size: 0.24rem;
		color: #6e90fe;
		border-radius: 0.25rem;
		background: rgba(30,70,150,0.4);
		margin: 0 0.17rem 0.28rem 0;
	}
	.search-advice-group {
		top: 1.95rem;
	}
	.search-result-group {
		width: 100%;
		top: 1.95rem;
		overflow-y: auto;
		-webkit-overflow-scrolling : touch;
	}
	.search-result-group .rel {
		width: 100%;
	}
	.search-result-group .result-item:last-child {
		margin-bottom: 0.5rem;
	}
	.search-result-group .load-finish {
		position: relative;
		text-align: center;
		font-size: 0.3rem;
		color: #ccc;
		margin: 0.3rem 0 0.3rem;
	}
	.search-result-group .load-finish:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 1.25rem;
		margin: auto 0;
		width: 1.5rem;
		height: 0.01rem;
		background: #fff;
	}
	.search-result-group .load-finish:after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 1.25rem;
		margin: auto 0;
		width: 1.5rem;
		height: 0.01rem;
		background: #fff;
	}
	.search-result-group .load-more {
		height: 0.5rem;
		font-size: 0.3rem;
		line-height: 0.5rem;
		margin: 0.3rem 0 0.3rem;
		text-align: center;
		color: #fff;
	}
	.search-result-group .load-more .loading {
		display: inline-block;
		font-size: 0.3rem;
		width: 0.46rem;
		height: 0.46rem;
		background: url(./image/loading.gif) center center no-repeat;
		-webkit-background-size: 0.4rem 0.4rem;
		background-size: 0.4rem 0.4rem;
	}
</style>